<template>
<div class="dashboard-container">
    <div class="app-container">
        <!-- 靠右的按钮 -->
        <page-tools>
            <template v-slot:after>
                <el-button type="primary" size="small" @click="handleAdd('0',1)">添加权限</el-button>
            </template>
        </page-tools>

        <!-- 表格 -->
        <el-table
            border
            :data="permissionList"
            row-key="id"
            :tree-props="{children: 'children'}"
            default-expand-all
            :row-class-name="rowStyleFn"
        >
            <el-table-column label="名称" prop="name" />
            <el-table-column align="center" label="标识" prop="code" />
            <el-table-column align="center" label="描述" prop="description" />
            <el-table-column align="center" label="操作">
                <template slot-scope="{row}">
                    <el-button v-if="row.type === 1" type="text" @click="handleAdd(row.id,2)">添加</el-button>
                    <el-button type="text" @click="handleupdate(row)">编辑</el-button>
                    <el-button :disabled="!checkPermission('POINT_PER-DEL')" type="text" @click="handleRemove(row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <NewPermission ref="NewPermission" :is-show-per.sync="isShowPer" @refresh="getPermission"></NewPermission>
    </div>
</div>
</template>

<script>
import { getPermissionList, removePerById } from '@/api/permission.js'
import listToTree from '@/utils/ListToTree.js'
import NewPermission from './components/NewPermission.vue'
export default {
	components: {
		NewPermission
	},
	data() {
		return {
			/* 权限弹窗 */
			isShowPer: false,
			/* 权限信息表 */
			permissionList: [],
			pageParams: {
				page: 1,
				size: 5
			}

		}
	},
	created() {
		this.getPermission()
	},
	methods: {
		/* 获取权限数据 */
		async getPermission() {
			const res = await getPermissionList(this.pageParams)
			this.permissionList = listToTree(res, '0')
			console.log(this.permissionList)
		},
		/* 删除权限点 */
		handleRemove(row) {
			this.$confirm(`确定要删除 ${row.name} 权限点？`)
				.then(async() => {
					const res = await removePerById(row.id)
					console.log(res)
					this.$message.success('删除成功！')
				})
				.then(() => { this.getPermission() })
		},
		/* 添加权限点 */
		handleAdd(id, type) {
			this.$refs.NewPermission.formData.pid = id
			this.$refs.NewPermission.formData.type = type
			this.isShowPer = true
		},
		/* 编辑权限点 */
		handleupdate(row) {
			this.$refs.NewPermission.formData.id = row.id
			this.$refs.NewPermission.formData.type = row.type
			this.$refs.NewPermission.getPerList()
			this.isShowPer = true
		},
		rowStyleFn(row) {
			if (row.row.pid !== '0') {
				return 'childNode'
			}
		}
	}
}
</script>

<style lang="scss" scoped>

	.el-table{
		margin-top: 30px;
		::v-deep.childNode{
			background-color: #eeeeee;
		}
	}
</style>
